if

背景音樂：Bread - if

繼續JS

學會了函式function的基本概念與DOM標籤操作後，我們要了解一個常用的機制--條件判斷。
條件判斷有switch與if，我們先認識if，概念了解後，if也可以達到switch的效果，只是程式碼會比較難閱讀。
if就很直白，就是"如果"，如果發生A，就會執行B。A寫在if()後面的小括號中，執行的內容接在後面if(){}大括號中，是不是跟函式用法有點像呢？

而if後面通常與else搭配使用，若不是if(A)發生的條件，就執行else裡面的內容。

動手做 快樂多

index.ejs

  <script>
  	// JS內容寫在這 
  	// alert('還沒30天我已經學會了HTML與CSS啦！')
  	function myJSFunction(){
  		document.getElementById("onlyId").innerHTML = "<h2>按下按鈕替換id='onlyId'後的內容</h2>"
  	}

  	var n = 0;
  	function numberAdd(){
  	  n = n+1
  	  // 增加一個if else判斷
  	  if (n == 5){
  	  	document.getElementById("addResult").innerHTML = n + "現在是在if裡面"
  	  } else {
  	  	document.getElementById("addResult").innerHTML = n
  	  }
  	  
  	  return
  	}


  </script>

增加一個if else的判斷式，內容很單純，如果n=5時，就會執行if後面{}的內容；若n不等於5，就會執行下面else後面{}的內容。存檔，重整網頁試試看。

點擊按鈕點到五的時候，是不是看到了if後面{}的內容了呢！
也補充說明一下，我們之前聊過js裡面的=不是等於的意思，是賦予值的意思，但是==或===就是兩者的值相等於的意思了，至於差別在哪？各位可以查查。

switch

當我們要設計複雜的條件的時候，if有個用法：else if
if(條件A){
條件A滿足時執行內容B寫在這
}else if(條件A'){
條件A'滿足時執行內容B'寫在這
}else if(條件A''){
條件A''滿足時執行內容B''寫在這
}else{
以上都不滿足時執行內容C寫在這
}
舉例試試看：

    var n = 0;
  	function numberAdd(){
  	  n = n+1
  	  // 增加一個if else判斷
  	  if (n == 5){
  	  	document.getElementById("addResult").innerHTML = n + "現在是在if裡面"
  	  } else if (n == 6){
  	  	document.getElementById("addResult").innerHTML = n + "現在是在 else if裡面"
  	  } else {
  	  	document.getElementById("addResult").innerHTML = n
  	  }
  	  return
  	}

存檔執行：

條件複雜的時候，確實這是好方式，譬如說有多個條件時，n>5，另一個變數x="hi"的時候才會滿足條件，這種狀況就很適合用這種寫法。
但我們的例子，都是n的數值，可以用switch。Switch的用法就是當條件的值=某個case時，就執行某個case的內容。
switch(變數) {
case A:
執行內容B
break;
case A':
執行內容B'
break;
default:
預設執行內容C
}
剛剛的例子，用switch寫的話：

<script>
  	var n = 0;
  	function numberAdd(){
  	  n = n+1
  	  // 增加一個if else判斷
  	  // if (n == 5){
  	  // 	document.getElementById("addResult").innerHTML = n + "現在是在if裡面"
  	  // } else if (n == 6){
  	  // 	document.getElementById("addResult").innerHTML = n + "現在是在 else if裡面"
  	  // } else {
  	  // 	document.getElementById("addResult").innerHTML = n
  	  // }

  	  switch (n) {
  	  	case 5:
  	  	  document.getElementById("addResult").innerHTML = "現在是在case" + n + "裡"
  	  	  break;

  	  	case 6:
  	  	  document.getElementById("addResult").innerHTML = "而現在是在case" + n + "裡面"
  	  	  break;

  	  	default:
  	  	document.getElementById("addResult").innerHTML = n
  	  }
  	  return
  	}
</script>

存檔執行看看，會看到跟剛剛一樣的結果。
掌握條件判斷了嗎！